<template>
    <div class="sign-detail">
        <el-form
            ref="form"
            :model="detail"
            class="input-no-border-box"
            label-width="80px">
            <topTitle title="基本信息"/>

            <div class="flex-space">
                <div class="space-left">
                    <el-form-item label="任务类型">
                        <el-select v-model="taskType" style="width:120px;">
                            <el-option
                                v-for="item in taskTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="space-right">
                    <el-form-item label="所属任务">
                        <el-select v-model="taskType" style="width:120px;">
                            <el-option
                                v-for="item in taskTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>

            <div class="flex-space">
                <div class="space-left">
                    <el-form-item label="任务标题">
                        <el-input v-model="detail.name"></el-input>
                    </el-form-item>
                </div>

                <div class="space-right">
                    <el-form-item label="跳转页面">
                        <el-select v-model="taskType" style="width:120px;">
                            <el-option
                                v-for="item in taskTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>

            <el-form-item label="任务描述">
                <el-input v-model="detail.name"></el-input>
            </el-form-item>

            <el-form-item label="时间">
                <el-date-picker
                    v-model="detail.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <span class="items-tip">*未选择则默认为永久</span>
            </el-form-item>

            <el-form-item label="状态">
                <el-radio-group v-model="detail.status">
                    <el-radio :label="1">上线</el-radio>
                    <el-radio :label="2">暂停</el-radio>
                    <el-radio :label="0">测试</el-radio>
                </el-radio-group>
            </el-form-item>

            <topTitle title="首页展示"/>

            <div class="flex-space">
                <div class="space-left">
                    <el-form-item label="首页展示">
                        <el-switch v-model="detail.delivery"></el-switch>
                    </el-form-item>
                </div>

                <div class="space-right">
                    <el-form-item label="展示位置">
                        <el-select v-model="taskType" style="width:120px;">
                            <el-option
                                v-for="item in taskTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>

            <el-form-item label="展示标题">
                <el-input v-model="detail.name"></el-input>
            </el-form-item>
        </el-form>

        <topTitle title="基础奖励"/>

        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title-item">签到天数</div>
                <div class="table-title-item">奖励样式</div>
                <div class="table-title-item">奖励内容</div>
                <div class="table-title-item">奖励类型</div>
                <div class="table-title-item">数量</div>
                <div class="table-title-item" style="flex: 2;">操作</div>
            </div>
            <div v-for="(item, index) in list" :key="index" class="table-for-box">
                <div class="table-content-box">
                    <div class="table-content-item">
                        <!-- <input type="number" v-model="item.name"> -->
                        {{index + 1}}
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <input type="number">
                    </div>
                    <div class="table-content-item" style="flex: 2;">
                        <el-button  @click="delTaskItem(index, list)" type="text" size="small" v-if="list.length > 1">删除</el-button>
                        <el-button type="text" size="small" @click="addUpTaskItem(index, list)">向上添加</el-button>
                        <el-button type="text" size="small" @click="addDownTaskItem(index, list)">向下添加</el-button>
                    </div>
                </div>
                <div class="table-children-box" v-if="item.rewardType === 2">
                    <div style="width:279px;"></div>
                    <div style="flex:1;">
                        <div class="children-title-box">
                            <div class="children-title-item">顺序</div>
                            <div class="children-title-item">奖励数量</div>
                            <div class="children-title-item">概率</div>
                            <div class="children-title-item" style="flex:2;">操作</div>
                        </div>
                        <div class="children-content-box" v-for="(childrenItem, childrenIndex) in item.children" :key="childrenIndex">
                            <div class="children-content-item">
                                <input type="number" v-model="childrenItem.name">
                            </div>
                            <div class="children-content-item">
                                <input type="number">
                            </div>
                            <div class="children-content-item">
                                <input type="number">
                            </div>
                            <div class="children-content-item" style="flex: 2;">
                                <el-button @click="delTaskItem(childrenIndex, item.children)" type="text" size="small" v-if="item.children.length > 1">删除</el-button>
                                <el-button @click="addUpChildrenItem(childrenIndex, item.children)" type="text" size="small">向上添加</el-button>
                                <el-button @click="addDownChildrenItem(childrenIndex, item.children)" type="text" size="small">向下添加</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <topTitle title="额外奖励" class="m20"/>

        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title-item">签到天数</div>
                <div class="table-title-item">奖励样式</div>
                <div class="table-title-item">奖励内容</div>
                <div class="table-title-item">奖励类型</div>
                <div class="table-title-item">数量</div>
                <div class="table-title-item" style="flex: 2;">操作</div>
            </div>
            <div v-for="(item, index) in list" :key="index" class="table-for-box">
                <div class="table-content-box">
                    <div class="table-content-item">
                        <input type="number" v-model="item.name">
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <el-select
                            @change="rewardTypeChange($event, item)"
                            v-model="item.rewardType">
                            <el-option
                                v-for="reward in rewardTypeList"
                                :key="reward.value"
                                :label="reward.label"
                                :value="reward.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-content-item">
                        <input type="number">
                    </div>
                    <div class="table-content-item" style="flex: 2;">
                        <el-button  @click="delTaskItem(index, list)" type="text" size="small" v-if="list.length > 1">删除</el-button>
                        <el-button type="text" size="small" @click="addUpTaskItem(index, list)">向上添加</el-button>
                        <el-button type="text" size="small" @click="addDownTaskItem(index, list)">向下添加</el-button>
                    </div>
                </div>
                <div class="table-children-box" v-if="item.rewardType === 2">
                    <div style="width:279px;"></div>
                    <div style="flex:1;">
                        <div class="children-title-box">
                            <div class="children-title-item">顺序</div>
                            <div class="children-title-item">奖励数量</div>
                            <div class="children-title-item">概率</div>
                            <div class="children-title-item" style="flex:2;">操作</div>
                        </div>
                        <div class="children-content-box" v-for="(childrenItem, childrenIndex) in item.children" :key="childrenIndex">
                            <div class="children-content-item">
                                <input type="number" v-model="childrenItem.name">
                            </div>
                            <div class="children-content-item">
                                <input type="number">
                            </div>
                            <div class="children-content-item">
                                <input type="number">
                            </div>
                            <div class="children-content-item" style="flex: 2;">
                                <el-button @click="delTaskItem(childrenIndex, item.children)" type="text" size="small" v-if="item.children.length > 1">删除</el-button>
                                <el-button @click="addUpChildrenItem(childrenIndex, item.children)" type="text" size="small">向上添加</el-button>
                                <el-button @click="addDownChildrenItem(childrenIndex, item.children)" type="text" size="small">向下添加</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            detail: {},
            taskType: 0, // 任务类型
            taskTypeList: [
                { value: 0, label: '全部任务' },
                { value: 1, label: '新手任务' },
                { value: 2, label: '每日任务' },
                { value: 3, label: '永久任务' },
                { value: 4, label: '限时任务' }
            ], // 任务类型列表
            rewardTypeList: [
                { value: 1, label: '固定' },
                { value: 2, label: '随机' }
            ],
            list: [
                { children: [{}, {}], rewardType: 1, name: 1 },
                { children: [{}, {}], rewardType: 2, name: 2 },
                { children: [{}], rewardType: 2, name: 4 }
            ]
        }
    },

    methods: {
        // 删除任务
        delTaskItem (index, list) {
            list.splice(index, 1)
        },

        // 向上添加list
        addUpTaskItem (index, list) {
            list.splice(index, 0, { children: [{}], rewardType: 1, name: 3 })
        },

        // 向上添加children
        addUpChildrenItem (index, list) {
            list.splice(index, 0, { name: 11111 })
        },

        // 向上添加list
        addDownTaskItem (index, list) {
            list.splice(index + 1, 0, { children: [{}], rewardType: 1, name: 3 })
        },

        // 向下添加children
        addDownChildrenItem (index, list) {
            list.splice(index + 1, 0, { name: 2222 })
        },

        // TODO: 任务奖励类型切换 如果切换为随机则自动添加
        rewardTypeChange (type, item) {
            if (type === 2 && !item.children.length) {
                item.children = [{}]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .sign-detail {
        padding-bottom: 20px;
        max-width: 960px;
        margin: 0 auto;
        .m20 {
            margin-top: 20px;
        }

        .flex-space {
            display: flex;
            .space-left {
                flex: 1;
                padding-right: 20px;
            }
            .space-right {
                flex: 1;
                padding-left: 20px;
            }
        }

        // 项目提示
        .items-tip {
            margin-left: 10px;
            font-size: 12px;
            // color: #F56C6C;
            color: red;
        }

        .table-box {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            border-bottom: none;
            .table-title-box {
                display: flex;
                font-size: 14px;
                color: #909399;
                border-bottom: 1px solid #ebeef5;
                .table-title-item {
                    flex: 1;
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #ebeef5;
                    &:last-child {
                        border: none;
                    }
                }
            }
            .table-for-box {
                .table-content-box {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .table-content-item {
                        flex: 1;
                        // min-height: 40px;
                        padding: 10px;
                        font-size: 14px;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        border-right: 1px solid #ebeef5;
                        &:last-child {
                            border: none;
                        }
                        > input {
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
                .table-children-box {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .children-title-box {
                        display: flex;
                        .children-title-item {
                            flex: 1;
                            font-size: 14px;
                            color: #909399;
                            padding: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-left: 1px solid #ebeef5;
                        }
                    }
                    .children-content-box {
                        display: flex;
                        border-top: 1px solid #ebeef5;
                        .children-content-item {
                            flex: 1;
                            padding: 10px;
                            font-size: 14px;
                            color: #606266;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            border-left: 1px solid #ebeef5;
                            > input {
                                width: 100%;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
